class GameOverPage {
  constructor(callbacks) {
    this.callbacks = callbacks
  }

  init(options) {
    this.initGameoverCanvas(options)
  }

  initGameoverCanvas(options) {
    const aspect = window.innerHeight / window.innerWidth
    this.scene = options.scene
    this.canvas = document.createElement('canvas')
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.texture = new THREE.Texture(this.canvas) // 创建一个纹理
    this.material = new THREE.MeshBasicMaterial({
      map: this.texture,
      transparent: true,
      side: THREE.DoubleSide
    }) // 创建一个材质
    this.geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight) // 平面的几何图形
    this.obj = new THREE.Mesh(this.geometry, this.material)
    this.obj.position.z = 1
    this.obj.rotation.y = Math.PI
    this.context = this.canvas.getContext('2d')
    this.context.fillStyle = '#333'
    this.context.fillRect((window.innerWidth - 200)/2, (window.innerHeight - 100) / 2, 200, 100)
    
    this.context.fillStyle = '#eee'
    this.context.font = '20px Georgia'
    this.context.fillText('Game Over', (window.innerWidth - 200)/2 + 50, (window.innerHeight - 100) / 2 + 55)
    this.texture.needsUpdate = true // 更新纹理 放在最后
    this.scene.add(this.obj)
  }

  show() {
    console.log('game-over-page init')
  }
}

export default GameOverPage